<template>
    <div>
        <!--没有它 底部会拉到屏幕下面-->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-nav-bar title="我的" left-text="返回" left-arrow>
                <template #right>
                    <span>登录</span>
                </template>
            </van-nav-bar>

            <div style="margin-left: 20px; width: 500px; height: 100px">
                <van-image
                        style="float: left;margin-top: 10px"
                        round
                        width="4rem"
                        height="4rem"
                        src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <div style="float: left; width: 180px">
                    <div style="float: left; width: 180px;margin-top: 14px">
                        <span style="margin-left: 20px" @click="$router.push('/login')">{{online === true ? user.name : '登录'}}/{{online === true ? '切换账户':'注册'}}</span>
                    </div>
                    <div style="float: left; width: 200px; margin-top: 12px">
                        <span style="margin-left: 20px">{{online === true ? '欢迎登录':'暂无手机绑定'}}</span>
                    </div>
                </div>
                <div style="float: left; width: 100px;">
                    <van-icon @click="$router.push('/login')" style="margin-top: 30px; margin-left:20px;" size="large" name="arrow" />
                </div>
            </div>

            <div style="width: 500px; height: 40px">
                <div style="width: 60px;height: 40px;float: left; margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    36.9
                </span>
                    <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    积分
                </span>
                </div>
                <div style="width: 60px;height: 40px;float: left;margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    20000
                </span>
                    <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    话费/分钟
                </span>
                </div>
                <div style="width: 60px;height: 40px;float: left; margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    10000
                </span>
                    <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    卡余额
                </span>
                </div>
                <div style="width: 60px;height: 40px;float: left; margin-left: 10px;text-align: center">
                <span style="float: left; width: 60px; margin-left: 20px">
                    2
                </span>
                    <span style="float: left; width: 60px; margin-left: 20px;font-size: 14px;margin-top: 6px">
                    现金账户
                </span>
                </div>
            </div>

            <div style="width: 500px; margin-top: 20px;">
                <van-list style="height: 300px">
                    <van-cell style="margin-left:30px;" v-for="item in list" :key="item" :title="item.title"/>
                </van-list>
            </div>

        </van-pull-refresh>
    </div>
</template>

<script>
    import Notify from "vant/lib/notify";

    export default {
        name: "Encruit",
        data() {
            return{
                online: false,
                user: '',
                list: [
                    {'title': '历史记录'},
                    {'title': '报名信息'},
                    {'title': '个人信息'},
                    {'title': '意见反馈'},
                    {'title': '联系客服'},
                    {'title': '设置'},
                    {'title': '退出'},
                ],
                show: false,
                loading: false,
                finished: false,
                refreshing: false,
            }
        },
        mounted() {
            if (window.sessionStorage.getItem('user')) {
                this.online = true
                //一定要记得用json的形式接收
                this.user = JSON.parse(window.sessionStorage.getItem('user'))
                console.log(this.user)
            }
        },
        methods: {
            showDetail() {
                this.show = true
            },
            enroll() {
                // 危险通知
                Notify({ type: 'warning', message: '尚未登录,请登录!' });
            },
            onRefresh() {
             window.location.reload()
            },
        },
    }
</script>

<style scoped>

</style>
